<template>
    <div class="jd-search-list">
        <ul>
            <li v-for="item in searchList" :key="item.proid">
                <img :src="item.img1" alt="">
                <p class="name1">{{ item.proname }}
                    <p class="price">￥{{ item.originprice }}</p>
                </p>

            </li>

        </ul>
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

// 导入相关ts接口
import type { MyHotItem } from '@/config/interface'
const searchList = inject<MyHotItem[]>('searchList')
console.log(searchList);


</script>
<style scoped lang="scss">
.jd-search-list {
    ul {
        padding: 10px;
        box-sizing: border-box;

        li {
            height: 160px;
            display: flex;
            flex: 1;
            border: 1px solid skyblue;
            margin: 10px 0;
            align-items: center;
            justify-content: center;
            

            .name1 {
                flex-wrap: wrap;
                display: flex;   
                font-size: 12px;  
                .price{
                    padding: 5px;
                    box-sizing: border-box;
                    font-size: 16px;
                    font-weight: 700;
                    
                }
            }

            img {
                display: block;
                width: 120px;
                height: 120px;
                margin-right: 10px;
            }

            .price {
                color: red;
                /* height: 50px; */
            }
        }
    }
}
</style>